$themes: (
    blue: (
        themeText: #02B7E6,
        themeBgc: #ffffff,
        successColor: #F5F7F9,
        errorColor: #FF4000,
        warnColor: #FF7E00,
        promptColor: #017EFF,
        failColor:  #888888,
        fontFamily: "PingFangSC, PingFang SC",
        gradientStart: #02B7E6,
        gradientEnd: #36A9F3,
        lightBgc: rgba(2,183,230,0.05),
        lightBorderColor: rgba(2,183,230,0.3),
    ),
    orangeRed: (
        themeText: #FF6430,
        successColor: #F5F7F9,
        errorColor: #FF4000,
        warnColor: #FF7E00,
        promptColor: #017EFF,
        failColor:  #888888,
        fontFamily: "PingFangSC, PingFang SC",
        gradientStart: #FF8359,
        gradientEnd: #FF6430,
        lightBgc: rgb(255, 100, 48,0.05),
        lightBorderColor: rgb(255, 100, 48,0.3),
    )
);

@mixin themeify {
	@each $theme-name, $theme-map in $themes {
		$theme-map: $theme-map !global;
        // [data-theme='#{$theme-name}'] & {
        [data-theme="#{$theme-name + ''}"] & {
			@content;
		}
	}
}
  
//声明一个根据Key获取颜色的function
@function themed($key) {
    @return map-get($theme-map, $key);
}

//获取文字主题色
@mixin themeText($color) {
    @include themeify {
        color: themed($color)!important;
    }
}

//获取background-color背景颜色
@mixin background_color($color) {
    @include themeify {
        background-color: themed($color)!important;
    }
}

//获取字体颜色
@mixin font_color($color) {
    @include themeify {
        color: themed($color)!important;
    }
}

//获取渐变背景色
@mixin background-gradient($gradientKey) {
    @include themeify {
        // 从 $theme-map 中获取渐变的起始和结束颜色
        $gradientStart: themed('gradientStart');
        $gradientEnd: themed('gradientEnd');

        // 应用背景渐变
        background: linear-gradient(135deg, $gradientStart 0%, $gradientEnd 100%) !important;
    }
}

@mixin borderColor($key) {
    @include themeify {
        border-color: themed($key) !important;
    }
}
  